<template>
  <s-page custom-class="IndexList-Page">
    <s-nav-bar back title="自定义导航+索引列表" />
    <view class="container">
      <s-index-list :index-list="indexList" sticky :offset-top="offsetTop + 'px'" :scroll-top="scrollTop">
        <view v-for="(item, index) of indexList" :key="index">
          <s-index-anchor :sort="index" :index="item" />
          <s-cell v-for="i of list" :key="i" :title="'文本' + i" />
        </view>
      </s-index-list>
    </view>
  </s-page>
</template>

<script>
export default {
  data() {
    return {
      offsetTop: uni.getSystemInfoSync().statusBarHeight + 44,
      scrollTop: 0,
      indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U',
        'V', 'W', 'X', 'Y', 'Z'],
      list: [1, 2, 3, 4, 5, 6],
    };
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
};
</script>

<style lang="scss">
page {
  // background-color: $white;
}
.IndexList-Page {
  // ::v-deep {
  //   .c-demo-block {
  //     &__title {
  //       padding-left: $padding-md;
  //     }
  //   }
  // }
  .container {
    // padding: 0 $padding-md;
  }
}
</style>
